<template>
	<view>
		<!-- F1面包屑 -->
		<!-- F2轮播广告 -->
		<swiper class="swiper" indicator-dots autoplay :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image :src="$base+res.pic" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="$base+res.picc" mode="widthFix"></image>
				</view>
			</swiper-item>
			
		</swiper>
		<!-- F3商品规格 -->
		<view class="productdetails">
			<uni-card :title="res.title" isFull :extra="`型号:${res.category}`">
				<view class="product_price">
					价格：<span>{{res.price}}</span>
				</view>
			</uni-card>
		</view>	
		<!-- F4为您推荐 -->
		<!-- @touchmove.stop添加属性 -->
		<uni-card title="为您推荐" isFull>
			<scroll-view scroll-x @touchmove.stop>
				<view class="suggest-list">
					<view class="suggest" v-for="(s,i) in suggesList" :key="i">
						<image :src="s.pic" mode="widthFix"></image>
						<text>{{s.title}}</text>
					</view>
				</view>
			</scroll-view>
		</uni-card>
	
		<!-- F5商品详情 -->
       <view class="footers">
		   <span>商品详情</span>
		   <view class="footers_item">
		   		   <image :src="$base+res.pic1" mode="widthFix"></image>
		   </view>
		<view class="footers_item">
				   <image :src="$base+res.pic2" mode="widthFix"></image>
		</view>
		 <view class="footers_item">
		 		   <image :src="$base+res.pic3" mode="widthFix" v-if="res.pic3!==null"></image>
		 </view>
		 <view class="footers_item">
		 		   <image :src="$base+res.pic4" mode="widthFix" v-if="res.pic4!==null"></image>
		 </view>
		 <view class="footers_item">
		 		   <image :src="$base+res.pic5" mode="widthFix" v-if="res.pic5!==null"></image>
		 </view>
		 <view class="footers_item">
		 		   <image :src="$base+res.pic6" mode="widthFix" v-if="res.pic6!==null"></image>
		 </view>
	   </view>
	   <!-- F6商品购买 -->
	   <view class="product_buy">
     	 <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick=" jump('/pages/pay/pay',res)" />  	
	   </view>
	   
	
	</view>
</template>

<script>
	import {productdetails,addcollect,addfooter,Addmallcart} from '@/service/index.js'
	export default {
		data() {
			return {
				res:'',
				family:{},
				suggesList:[//为您推荐必须的数据列表
     {sid:2,pic:'https://pixl.decathlon.com.cn/p1662199/k$4d461294413f611f2b18751bd05f0fed/sq/1x7+RC100.jpg',title:'铝合金弯把圈刹1x7公路自行车RC100',href:'/pages/productDetails/productDetails?pid=2'},
	{sid:4,pic:'https://pixl.decathlon.com.cn/p2123346/k$f685c4c2804d7a44ef715719fa31babe/sq/BR+560.jpg',title:'成人轻量羽毛球套拍 BR 560',href:'/pages/productDetails/productDetails?pid=2'},
	{sid:5,pic:'https://pixl.decathlon.com.cn/p2123346/k$f685c4c2804d7a44ef715719fa31babe/sq/BR+560.jpg',title:'铝合金弯把圈刹1x7公路自行车RC100',href:'/pages/productDetails/productDetails?pid=2'},
	{sid:6,pic:'https://pixl.decathlon.com.cn/p1662199/k$4d461294413f611f2b18751bd05f0fed/sq/1x7+RC100.jpg',href:'/pages/productDetails/productDetails?pid=2',title:'成人轻量羽毛球套拍 BR 560'}
				],
				//购物车数据
				 options: [{
							icon: 'headphones',
							text: '客服'
						}, {
							icon: 'star',
							text: '收藏',
					
							infoBackgroundColor:'#007aff',
							infoColor:"red"
						}, {
							icon: 'cart',
							text: '购物车',
							
							
						}],
					    buttonGroup: [{
					      text: '加入购物车',
					      backgroundColor: '#ff0000',
					      color: '#fff'
					    },
					    {
					      text: '立即购买',
					      backgroundColor: '#ffa200',
					      color: '#fff'
					    }
					    ]
			}
			
		
			
		},
		//加载详情数据
		async onLoad(e) {
			console.log(e.lid)
			let res=await productdetails(e.lid)
			console.log(res);
			this.res=res.result
	   let ress=await addfooter(this.$uid,this.res.lid,this.res.title,this.res.price,this.res.pic)
	   console.log(ress.code)
	
            

		},
		methods: {
				 async  onClick (e) {
			  let x=e.index
			  if(x==1){
				let res=await addcollect(this.$uid,this.res.lid,this.res.title,this.res.price,this.res.pic)  
				console.log(res.code)
				  if(res.code==200){
					  uni.showToast({
					  	title:"收藏成功",
						icon:'checkbox'
					  })
				
				  }else{
					  
					 uni.showToast({
					 	title:"商品已存在",
					 	icon:'close'
					 }) 
					  
					  
				  }
			  }
			  else if(x==2){
				 let res=await Addmallcart(this.$uid,this.res.lid,this.res.title,this.res.price,this.res.pic,1)
				 console.log(res.code)
				   if(res.code==200){
				 	  uni.showToast({
				 	  	title:"添加购物车成功",
				 		icon:'checkbox'
				 	  })
				 
				   }else{
				 	  
				 	 uni.showToast({
				 	 	title:"添加购物车失败",
				 	 	icon:'close'
				 	 }) 
				 	  
				 	  
				   }
			  }
				  },
				
				 jump(path,res){			 
					 uni.navigateTo({
						 url:path,
						 // query:res
					 })
					uni.setStorageSync('ress',res) 
					window.location.reload()
				 }
				  
		}
	}
</script>

<style lang="scss">
	.product_buy{
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.footers{
		border: 1px solid transparent;
		box-sizing: border-box;
	span{
	
		color: #3A3A3A;
		padding: 10px;
		
	}
	   width: 100%;
	   .footers_item{
		   border-bottom: 1px solid darkgray;
		   border-top:1px solid darkgray ;
		   image{
			   width: 100%;
		   }
		
	   }
	   .footers_item:last-child{
		   margin-bottom: 120rpx;
	   }
	
	}
	
	.product_price{
		span{
        font-size: 18px;
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		color: red;
		font-weight: bold;
			
		}
	}
	.swiper{
		width: 750rpx;
		height: 620rpx;
		.swiper-item{
			image{
				width: 750rpx;
			}
		}
	}
	
    .suggest-list{
		display: flex;
		width: 280rpx*4; //此处必须设置滚动列表view宽度
		.suggest{
			width: 280rpx;
			padding: 20rpx;
			image{
				width: 100%;
			}
			text{
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient:vertical;
			}
		}
	}
</style>